/**
 * Toast.js
 * Provides toast notification functionality for the Virtual Bank System
 */

class Toast {
  constructor() {
    this.container = null;
    this.init();
  }

  /**
   * Initialize toast container
   */
  init() {
    // Check if container already exists
    let container = document.querySelector('.toast-container');
    
    if (!container) {
      // Create container if it doesn't exist
      container = document.createElement('div');
      container.className = 'toast-container';
      document.body.appendChild(container);
    }
    
    this.container = container;
  }

  /**
   * Show a toast notification
   * @param {Object} options - Toast options
   * @param {string} options.type - Toast type (success, error, warning, info)
   * @param {string} options.title - Toast title
   * @param {string} options.message - Toast message
   * @param {number} options.duration - Toast duration in milliseconds
   */
  show({ type = 'info', title = '', message = '', duration = 3000 }) {
    // Initialize container if needed
    if (!this.container) {
      this.init();
    }
    
    // Create toast element
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    
    // Generate icon based on type
    let icon = '';
    switch (type) {
      case 'success':
        icon = '<i class="fas fa-check-circle"></i>';
        break;
      case 'error':
        icon = '<i class="fas fa-times-circle"></i>';
        break;
      case 'warning':
        icon = '<i class="fas fa-exclamation-triangle"></i>';
        break;
      case 'info':
      default:
        icon = '<i class="fas fa-info-circle"></i>';
        break;
    }
    
    // Set toast content
    toast.innerHTML = `
      <div class="toast-icon">${icon}</div>
      <div class="toast-content">
        ${title ? `<div class="toast-title">${title}</div>` : ''}
        <div class="toast-message">${message}</div>
      </div>
      <button class="toast-close">&times;</button>
    `;
    
    // Add toast to container
    this.container.appendChild(toast);
    
    // Auto-remove after duration
    const timeout = setTimeout(() => {
      this.removeToast(toast);
    }, duration);
    
    // Store timeout in toast element
    toast._timeout = timeout;
    
    // Add click handler for close button
    const closeButton = toast.querySelector('.toast-close');
    if (closeButton) {
      closeButton.addEventListener('click', () => {
        this.removeToast(toast);
      });
    }
    
    // Return toast element for potential later reference
    return toast;
  }

  /**
   * Remove a toast element
   * @param {HTMLElement} toast - Toast element to remove
   */
  removeToast(toast) {
    if (!toast) return;
    
    // Clear timeout if exists
    if (toast._timeout) {
      clearTimeout(toast._timeout);
    }
    
    // Add exit animation
    toast.classList.add('toast-exit');
    
    // Remove after animation completes
    setTimeout(() => {
      if (toast.parentNode === this.container) {
        this.container.removeChild(toast);
      }
    }, 300); // Match the animation duration in CSS
  }

  /**
   * Show a success toast
   * @param {string} message - Toast message
   * @param {string} title - Toast title
   * @param {number} duration - Toast duration in milliseconds
   */
  success(message, title = '成功', duration = 3000) {
    return this.show({ type: 'success', title, message, duration });
  }

  /**
   * Show an error toast
   * @param {string} message - Toast message
   * @param {string} title - Toast title
   * @param {number} duration - Toast duration in milliseconds
   */
  error(message, title = '错误', duration = 3000) {
    return this.show({ type: 'error', title, message, duration });
  }

  /**
   * Show a warning toast
   * @param {string} message - Toast message
   * @param {string} title - Toast title
   * @param {number} duration - Toast duration in milliseconds
   */
  warning(message, title = '警告', duration = 3000) {
    return this.show({ type: 'warning', title, message, duration });
  }

  /**
   * Show an info toast
   * @param {string} message - Toast message
   * @param {string} title - Toast title
   * @param {number} duration - Toast duration in milliseconds
   */
  info(message, title = '提示', duration = 3000) {
    return this.show({ type: 'info', title, message, duration });
  }
}

// Create a singleton instance
const toast = new Toast();

// Export for use in other files
window.Toast = toast;
